<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      ref="dialog"
      width="500px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="show"
      :title="title"
      @close="dialogClose"
    >
      <el-row align="middle">
        <el-col align="middle">
          <el-upload
            drag
            ref="uploadRef"
            multiple
            :auto-upload="false"
            action=""
            name="files"
            :on-change="uploadFileOnChange"
            :show-file-list="false"
            :file-list="fileList"
            ><i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">文件大小不能超过10mb</div>
          </el-upload>
          <div class="file-list" v-for="(item, index) in fileList" :key="index">
            <div class="file-list-left">
              {{ fileName(item.name) }}
            </div>
            <div class="file-list-right"><el-button icon="el-icon-delete" size="mini" type="danger" circle @click="deleteFile(item)"></el-button></div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="info" @click="downloadTemplate">模板下载</el-button>
        <el-button size="mini" type="danger" @click="cancelUpload">取 消</el-button>
        <el-button size="mini" type="primary" @click="doCommit">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import financialService from '@/request/cstManagement/financialService'
import { delFile } from '@/request/contractManage/contract'

export default {
  name: 'finaccial-upload',
  data() {
    return {}
  },
  props: {
    show: {
      required: true,
      type: Boolean,
    },
    title: {
      required: true,
      type: String,
    },
    fileList: {
      required: true,
      type: Array,
      default: () => [],
    },
    historyFileList: {
      required: true,
      type: Array,
      default: () => [],
    },
    showTemplateButton: {
      required: true,
      type: Boolean,
      default: false,
    },
  },
  computed: {
    fileName() {
      return val => {
        if (val.length > 20) {
          return val.substring(0, 25) + '...'
        }
        return val
      }
    },
  },
  methods: {
    uploadFileOnChange(file) {
      // 校验大小
      if (file.size / 1024 / 1024 > 10) {
        this.$message.error({
          showClose: false,
          message: `${file.name}文件过大，无法上传`,
        })
        return
      }
      // 校验重复
      if (this.historyFileList.map(item => item.aName).includes(file.name) || this.fileList.map(item => item.name).includes(file.name)) {
        this.$message.error({
          showClose: true,
          message: `${file.name}重复上传`,
        })
        return
      }
      this.fileList.push(file)
    },
    downloadTemplate() {
      financialService.downloadTemplate().then(res => {
        const reader = new FileReader()
        const fileName = decodeURI(res.headers['filename'])
        reader.readAsDataURL(new Blob([res.data]))
        reader.onload = e => {
          let a = document.createElement('a')
          a.href = e.target.result
          a.download = fileName
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
        this.$store.dispatch('app/loading_status', false)
      })
    },
    cancelUpload() {
      this.dialogClose()
    },
    deleteFile(file) {
      for (let i = this.fileList.length - 1; i >= 0; i--) {
        if (file.name === this.fileList[i].name) {
          this.fileList.splice(i, 1)
          break
        }
      }
      if (file.history) {
        delFile({
          aId: file.aId,
        })
      }
    },
    doCommit() {
      if (!this.fileList.length) {
        this.$message.error({
          showClose: true,
          message: '至少添加一个附件',
        })
        return
      }
      this.$emit('doCommit')
    },
    dialogClose() {
      this.$refs['uploadRef'].clearFiles()
      this.$emit('uploadClose')
    },
  },
}
</script>

<style scoped>
.file-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
</style>
